<template>
    tween.js <br>
    请查看控制台
    <div class="description">
        补间(动画)（来自 in-between）是一个概念，允许你以平滑的方式更改对象的属性。<br>
        你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。<br>
        tween.js 中文使用指南： https://juejin.cn/post/6844903545053921293
    </div>
</template>
  
<script>
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';
export default {
    name: 'tween',
    components: {},
    props: {
    },
    data() {
    },
    methods: {
        init() {
            var position = { x: 100, y: 0 };

            // 首先为位置创建一个补间(tween)
            var tween = new TWEEN.Tween(position);

            // 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
            tween.to({ x: 200 }, 1000);

            // 更新
            tween.onUpdate(function (object) {
                console.log(object.x);
            });
            // 延迟执行
            tween.delay(3000);
            console.log("等待3s");

            // 启动
            tween.start();

            //开启递归
            this.animate();
        },
        animate() {
            requestAnimationFrame(this.animate.bind(this));
            TWEEN.update();
        }

    },
    mounted() {
        this.init()
    }
}
</script>
  
<style></style>
  